<template>
  <div class="button-container">
    <v-container style="padding-top: 5%">
      <v-row justify="center">
        <v-col cols="18" sm="12">
          <v-text-field
            v-model="searchKeyword"
            label="搜索"
            @input="filterEntries"
          ></v-text-field>
        </v-col>
      </v-row>
    </v-container>
  </div>

  <v-col cols="auto">
    <div class="button-container">
      <v-btn
        v-for="button in filteredButtons"
        :key="button.label"
        class="mr-4 mb-4"
        @click="handleButtonClick(button)"
      >
        <svg-icon type="mdi" :path="button.icon"></svg-icon>{{ button.label }}
      </v-btn>
    </div>
  </v-col>
</template>
<script>
import router from "@/router"; // 导入 Vue Router 实例
import SvgIcon from "@jamescoyle/vue-icon";
import {
  mdiCurling,
  mdiTools,
  mdiTextBoxOutline,
  mdiWeb,
  mdiCodeJson,
  mdiFilePdfBox,
  mdiAccount,
  mdiLanguageHtml5,
} from "@mdi/js";
export default {
  components: {
    SvgIcon,
  },
  data() {
    return {
      searchKeyword: "",
      buttons: [
        { label: "接口测试", icon: mdiWeb, route: "/spider/index" },
        { label: "格式化工具", icon: mdiCodeJson, route: "/formatting/json" },
        { label: "文本比对", icon: mdiTextBoxOutline, route: "/comparison" },
        { label: "加解密工具", icon: mdiTools, route: "/crypto" },
        { label: "Curl工具", icon: mdiCurling, route: "/curl" },
        { label: "pdf预览", icon: mdiFilePdfBox, route: "/pdf" },
        { label: "电局登录", icon: mdiAccount, route: "/etax/loginCode" },
        { label: "html渲染", icon: mdiLanguageHtml5, route: "/html/render" },
      ],
    };
  },
  methods: {
    handleButtonClick(e) {
      router.push(e.route); // 跳转到目标页面的路径
    },
  },
  computed: {
    filteredButtons() {
      if (this.searchKeyword) {
        return this.buttons.filter((button) =>
          button.label.includes(this.searchKeyword)
        );
      }
      return this.buttons;
    },
  },
};
</script>
<style>
.button-container {
  display: flex;
  flex-wrap: wrap;
}

.button-container v-btn {
  margin-right: 4px;
  margin-bottom: 4px;
  margin-top: 4px;
}
</style>
